<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue"
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'

// import { inject } from "vue-demi";

//头像上传
const imageUrl = ref('')
console.log(11111)
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  console.log(22222,imageUrl)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

let { proxy } = getCurrentInstance();
let dialogFormVisible = ref(false)
//发送给后端
var pdata = new FormData();

const ruleFormRef = ref<FormInstance>();

//表单字段
const form = reactive({
    name: '',
    id: '',
    tel: '',
    yx: '',
    pwd_zf: '',
    repwd_zf: '',
    tx: ''
})

const rules = reactive<FormRules>({
    name: [
        {
            required: false, message: "请输入姓名", trigger: "blur",
            pattern: /^[\u4E00-\u9FA5]{1,20}(·[\u4E00-\u9FA5]{2,10}){0,2}$/,
        },
        {
            min: 1,
            max: 20,
            message: "长度1-20个字",
            trigger: "blur"
        }
    ],
    id: [
        {
            pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            required: true,
            trigger: 'blur',
            message: "请输入18位身份证号"
        }
    ],
    tel: [{
        required: false, message: "请输入电话号码", trigger: "blur",
        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
    }],
    yx: [{
        required: true, message: "请输入邮箱", trigger: "blur",
        pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+/
    }],
    pwd_zf: [{
        required: true, message: "请输入支付密码", trigger: "blur",
        pattern: /(?![\d]+$)(?![a-zA-Z]+$)(?![\da-zA-Z]+$).{6,20}$/
    }],
    repwd_zf: [{
        required: true, message: "再次输入支付密码", trigger: "blur",
        pattern: /(?![\d]+$)(?![a-zA-Z]+$)(?![\da-zA-Z]+$).{6,20}$/
    }],
    tx: [{
        required: false, message: "请上传头像", trigger: "change",
        // pattern:,
    }]
});

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(3333, form.pwd_zf)
    if (!formEl) return;
    console.log(444444)

    await formEl.validate(async (valid, fields) => {
        console.log(5555, valid, formEl, formEl.validate)
        if (valid && form.pwd_zf == form.repwd_zf) {
            pdata.append("name", form.name);
            // pdata.append("tx",)
            pdata.append("id", form.id);
            pdata.append("tel", form.tel);
            pdata.append("yx", form.yx);
            pdata.append("pwd_zf", form.pwd_zf);
            pdata.append("repwd_zf", form.repwd_zf);
            await proxy.$axios.post("./Per_center", pdata);
            console.log("保存成功!");
        } else {
            console.log("保存失败!", fields);

        }
    })
}

</script>

<template>
    <div>
        <fieldset :visible.sync="dialogFormVisible">
            <legend>*我的信息*</legend>
            <el-form action="" label-width="120px" class="demo-ruleForm" :model="form" :rules="rules" ref="ruleFormRef"
                method="post">
                <el-form-item label="昵称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="tx" class="per_tx" v-model="form.tx">
                    <el-upload class="avatar-uploader"
                        action="..." :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="证件" prop="id">
                    <el-input v-model.number="form.id">
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="tel">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="yx">
                    <el-input v-model="form.yx"></el-input>
                </el-form-item>
                <el-form-item label="支付密码" prop="pwd_zf">
                    <el-input v-model="form.pwd_zf"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="repwd_zf">
                    <el-input v-model="form.repwd_zf"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
            </el-form>
        </fieldset>
    </div>
</template>



<style scoped lang="scss">

:deep .el-tabs {
    overflow: hidden;
}

fieldset {
    width: 600px;
    height: 650px;
    margin-left: 90px;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    font-family: '宋体';

    legend {
        margin-left: 5px;
        // margin: 0 auto;
        color: gray;
        font-size: 20px;
    }

    form {
        width: 100%;
        height: 400px;
        margin-top: 30px;
        margin-left: 30px;
        font-size: 16px;
        // background-color: rgb(172, 206, 206);

        .el-row {
            height: 50px;
            padding-left: 30px;
            // background-color: chocolate;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            input {
                width: 300px;
                height: 30px;
                border: 1px solid rgb(194, 193, 193);
                margin-left: 85px;
                outline: none;

                padding-left: 10px;
                font-weight: 300;
                font-size: 16px;
                font-family: "宋体";
            }

            input::value {
                color: rgb(194, 193, 193);
            }

            .info_four {
                margin-left: 54px;
            }
        }
    }
}

//更改focus的边框颜色
.el-input {
    --el-input-focus-border-color: none;
    --el-input-border-radius: 0;
    --el-input-value-color: rgb(194, 193, 193);
    font-family: "宋体";
}

.el-input[data-v-4d144d40] {
    width: 312px;
    height: 33px;
    font-size: 18px;
    margin-left: 54px;
    border: 1px solid rgb(194, 193, 193);
    outline: none;
    padding: 2px 1px;
}

::v-deep .el-input__wrapper {
    width: 100%;
    height: 28px;
    border: none;
    border-radius: none;
    box-shadow: none;
    margin-top: -1px;
    font-size: 16px;
}

::v-deep .el-input__inner::value {
    font-family: '宋体';
    color: rgb(194, 193, 193);
}

::v-deep .el-button {
    --el-button-bg-color: rgb(101, 207, 131);
    ;
    --el-button-hover-bg-color: rgb(101, 207, 131);
    --el-button-border-color: rgb(101, 207, 131);
    ;
    --el-button-hover-border-color: rgb(101, 207, 131);
    ;
    --el-button-active-border-color: rgb(86, 177, 86);
    --el-button-active-bg-color: rgb(86, 177, 86);
    margin-top: 30px;
    margin-left: 200px;
    width: 100px;
    height: 40px;
}



::v-deep .el-upload {
    width: 100px;
    height: 100px;
    margin-left: 52px;
    border: 1px solid black;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>